<template>
  <div class="table-box">
    <!-- <div class="add-btn" style="width: 100px">
      <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="toCreate(0)">新增活动</el-button>
    </div> -->
    <!-- 表格内容 -->
    <el-table border :data="tableData" style="width: 95%; margin-top: 20px; overflow: hidden">
      <el-table-column prop="1" label="#" width="80">
        <template #default="{ $index }">
          {{ $index + 1 + (formData.pageNum - 1) * formData.pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="活动名称" width="170" />
      <el-table-column prop="typeName" width="150" label="活动类型" />
      <el-table-column prop="statusName" width="100" label="活动状态" />
      <el-table-column prop="code" width="180" label="活动编码" />
      <el-table-column prop="startTime" width="350" label="活动时间">
        <template #default="{ row }"> {{ row.startTime }} / {{ row.endTime }} </template>
      </el-table-column>
      <el-table-column prop="creatTime" width="200" label="创建时间" />
      <el-table-column width="200" label="活动奖品">
        <template #default="{ row }">
          <span v-for="item in row.prize" :key="item.value">{{ item.name }}：{{ item.value }}</span>
        </template>
      </el-table-column>
      <el-table-column width="300" label="操作" fixed="right">
        <template #default="{ row }">
          <el-button v-auth="'edit'" type="primary" link @click="toEdit(row.id)"> 编辑 </el-button>
          <el-button v-auth="'delete'" type="primary" link @click="deleteAccount(row)"> 删除 </el-button>
          <!-- <el-button v-auth="'edit'" type="text" :icon="CirclePlus" @click="toCreate(0)">新增活动</el-button> -->
          <!-- <el-button v-auth="'delete'" type="text" :icon="CirclePlus" @click="toCreate(0)">新增活动</el-button> -->
        </template>
      </el-table-column>
      <template #append>
        <el-row type="flex" justify="center">
          <el-pagination
            :page-sizes="[10, 30, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </template>
    </el-table>
  </div>
</template>

<script setup lang="tsx" name="couponScanIndex">
import { ref, onMounted } from "vue";
import { getCmssalesPromotionList } from "@/api/modules/coupon";
import { useRouter } from "vue-router";

const formData = ref({
  pageNum: 1,
  pageSize: 10
  // name: "",
  // type: 1,
  // status: ""
});
const total = ref(0);

// 获取表格数据;
const tableData = ref<any[]>([]);
const getTableData = async () => {
  const res = await getCmssalesPromotionList(formData.value);
  tableData.value = res.data;
  total.value = res.count;
  console.log(res);
};
onMounted(() => {
  getTableData();
});

// 页面跳转修改
const router = useRouter();
// 跳转添加页面
const toCreate = (id?: number) => {
  if (id !== 0) {
    router.push({
      path: "/marketing/coupon-scan-edit",
      query: {
        id: id
      }
    });
  } else {
    router.push(`/marketing/coupon-scan-edit`);
  }
};
// 跳转到修改优惠券页面
const toEdit = (id?: number) => {
  if (id !== 0) {
    router.push({
      path: "/marketing/coupon-scan-edit",
      query: {
        id: id
      }
    });
  } else {
    router.push(`/marketing/coupon-scan-edit`);
  }
};

// 数量修改
const handleSizeChange = (v: number) => {
  formData.value.pageNum = 1;
  formData.value.pageSize = v;
  getTableData();
};
// 页数修改
const handleCurrentChange = (v: number) => {
  formData.value.pageNum = v;
  getTableData();
};
</script>

<style lang="scss" scoped>
.table-box {
  padding: 20px;
  overflow: hidden;
  background: #ffffff;
}
</style>
